<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Puaia 控制面板</title>
    <script src="/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #3a7bd5;
        }

        .nav {
            display: flex;
            gap: 20px;
        }

        .nav-item {
            color: #666;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .nav-item.active {
            background-color: #3a7bd5;
            color: white;
        }

        .info-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .info-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }

        .info-card:hover {
            transform: translateY(-5px);
        }

        .info-title {
            color: #888;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .info-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .info-change {
            font-size: 12px;
            color: #4caf50;
        }

        .charts-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .chart-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .chart-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .chart {
            height: 300px;
        }

        .bottom-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .table-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            color: #888;
            font-weight: 500;
        }

        .positive {
            color: #4caf50;
        }

        .negative {
            color: #f44336;
        }

        .view-more {
            text-align: right;
            margin-top: 15px;
            color: #3a7bd5;
            font-size: 14px;
            cursor: pointer;
        }

        @media (max-width: 1200px) {
            .info-cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .charts-row {
                grid-template-columns: 1fr;
            }

            .bottom-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .info-cards {
                grid-template-columns: 1fr;
            }

            .nav {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="dashboard">
        <div class="header">
            <div class="logo">dashboard</div>
            <div class="nav">
                <!-- top bar -->
                <div class="nav-item active">Overview</div>
                <div class="nav-item">Spider</div>
                <div class="nav-item">Power</div>
            </div>
        </div>

        <div class="info-cards">
            <div class="info-card">
                <div class="info-title">User</div>
                <div class="info-value" id="user-value">N/A</div>
                <div class="info-change"></div>
            </div>
            <div class="info-card">
                <div class="info-title">Time</div>
                <div class="info-value" id="time-value">N/A</div>
                <div class="info-change" id="datetime-value">N/A</div>
            </div>
            <div class="info-card">
                <div class="info-title">Orders</div>
                <div class="info-value">10,291</div>
                <div class="info-change">+8.7%</div>
            </div>
            <div class="info-card">
                <div class="info-title">Sales</div>
                <div class="info-value">$89,032</div>
                <div class="info-change">+11%</div>
            </div>
        </div>

        <div class="charts-row">
            <div class="chart-container">
                <div class="chart-title">Sales Overview</div>
                <div id="sales-chart" class="chart"></div>
            </div>
            <div class="chart-container">
                <div class="chart-title">Sold by Categories</div>
                <div id="category-chart" class="chart"></div>
            </div>
        </div>

        <div class="bottom-row">
            <div class="chart-container">
                <div class="chart-title">Offline Sales</div>
                <div id="offline-chart" class="chart"></div>
            </div>
            <div class="table-container">
                <div class="chart-title">Recent Transactions</div>
                <table>
                    <thead>
                        <tr>
                            <th>Channel</th>
                            <th>Orders</th>
                            <th>Revenue</th>
                            <th>Growth</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Instagram</td>
                            <td>340</td>
                            <td>$89,032</td>
                            <td class="positive">+30%</td>
                        </tr>
                        <tr>
                            <td>Domain</td>
                            <td>456</td>
                            <td>$44,321</td>
                            <td class="positive">+12%</td>
                        </tr>
                        <tr>
                            <td>Swimwear</td>
                            <td>231</td>
                            <td>$12,670</td>
                            <td class="positive">+24%</td>
                        </tr>
                        <tr>
                            <td>Bags</td>
                            <td>127</td>
                            <td>$8,234</td>
                            <td class="positive">+11%</td>
                        </tr>
                    </tbody>
                </table>
                <div class="view-more">VIEW MORE</div>
            </div>
        </div>
    </div>

    <script>
        async function updateUser() {
            try {
                const response = await fetch('/api/user');
                if (!response.ok) {
                    throw new Error(`API error! Status: ${response.status}`);
                }

                const data = await response.json();

                const valueDiv = document.getElementById('user-value');
                if (data.user) {
                    valueDiv.textContent = data.user;
                } else {
                    valueDiv.textContent = 'N/A';
                }

            } catch (error) {
                console.error("❌ Get API failed:", error);
            }
        }

        async function updateTime() {
            try {
                const response = await fetch('/api/uptime');
                if (!response.ok) {
                    throw new Error(`API error! Status: ${response.status}`);
                }

                const data = await response.json();

                const timeDiv = document.getElementById('time-value');
                if (data.uptime) {
                    const seconds = data.uptime
                    const days = Math.floor(seconds / (24 * 3600));
                    const hours = Math.floor((seconds % (24 * 3600)) / 3600);
                    timeDiv.textContent = `${days}days ${hours}hours`;
                } else {
                    timeDiv.textContent = 'N/A';
                }

                const datetimeDiv = document.getElementById('datetime-value');

                if (data.timestamp) {
                    const date = new Date(data.timestamp * 1000)
                    const formatted = new Intl.DateTimeFormat('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        <!-- second: '2-digit' -->
                    }).format(date);

                    datetimeDiv.textContent = `${formatted}`; // 2025/07/04 03:43:27
                } else {
                    datetimeDiv.textContent = 'N/A';
                }

            } catch (error) {
                console.error("❌ Get API failed:", error);
            }
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', updateUser);
        document.addEventListener('DOMContentLoaded', updateTime);

        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function () {
            // 销售趋势图
            const salesChart = echarts.init(document.getElementById('sales-chart'));
            const salesOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Traffic', 'Sales', 'Orders']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Traffic',
                        type: 'line',
                        smooth: true,
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        lineStyle: {
                            color: '#3a7bd5'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(58, 123, 213, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(58, 123, 213, 0.05)'
                                }]
                            }
                        }
                    },
                    {
                        name: 'Sales',
                        type: 'line',
                        smooth: true,
                        data: [620, 732, 701, 734, 1090, 1130, 1120],
                        lineStyle: {
                            color: '#4caf50'
                        }
                    },
                    {
                        name: 'Orders',
                        type: 'line',
                        smooth: true,
                        data: [720, 832, 801, 834, 1190, 1230, 1220],
                        lineStyle: {
                            color: '#ff9800'
                        }
                    }
                ]
            };
            salesChart.setOption(salesOption);

            // 类别分布图
            const categoryChart = echarts.init(document.getElementById('category-chart'));
            const categoryOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center'
                },
                series: [
                    {
                        name: 'Sales by Category',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 30, name: 'Swimwear'},
                            {value: 20, name: 'Bags'},
                            {value: 15, name: 'Accessories'},
                            {value: 10, name: 'Shoes'},
                            {value: 25, name: 'Clothing'}
                        ],
                        color: ['#3a7bd5', '#4caf50', '#ff9800', '#9c27b0', '#f44336']
                    }
                ]
            };
            categoryChart.setOption(categoryOption);

            // 离线销售图
            const offlineChart = echarts.init(document.getElementById('offline-chart'));
            const offlineOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['Instagram', 'Giveaway', 'Domain', 'Web tab', 'Affiliate']
                },
                series: [
                    {
                        name: 'Sales',
                        type: 'bar',
                        data: [320, 302, 301, 334, 390],
                        itemStyle: {
                            color: function (params) {
                                const colorList = ['#3a7bd5', '#4caf50', '#ff9800', '#9c27b0', '#f44336'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                ]
            };
            offlineChart.setOption(offlineOption);

            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function () {
                salesChart.resize();
                categoryChart.resize();
                offlineChart.resize();
            });
        });
    </script>
</body>

</html>
